<template>
  <div>
      <li>
        <label for="">
            <!-- 普通写法 -->
            <input type="checkbox" @change="changeState(todo.id)" :checked="todo.isChanged">
            <!-- v-model写法 也能实现，但是不推荐，v-model不建议和props属性一起使用 -->
            <!-- <input type="checkbox" v-model="todo.isChanged"> -->
            <span>{{todo.isEdit}}, {{typeof todo.isEdit}}</span>
            <span v-if="!todo.idEdit">{{todo.name}}</span>
            <input v-if="todo.isEdit" type="text" v-model="todo.name" @keyup.enter="EntereditItem(todo)">
        </label>
        <button class="btn btn-danger" @click="deleteItem(todo.id)">删除</button>
        <button class="btn btn-edit" @click="editItem(todo)">编辑</button>
      </li>
     
  </div>
</template>

<script>
export default {
    name:'item',
    props:['todo'],
    methods: {
        changeState(id) {
            // 通知App组件将对应的todo对象的 isChange 属性修改
            this.$bus.$emit('checkTodo', id)
        },
        deleteItem(id) {
            if(confirm('确定删除吗？')){
                this.$bus.$emit('deleteTodo', id)
            }
        },
        editItem(item) {
            if (item.hasOwnProperty('isEdit')) {
                item.isEdit = true
            } else {
                this.$set(item, 'isEdit', true)
            }
            console.log(item);
        },
        EntereditItem(item) {
            item.isEdit = false
        }
    },
}
</script>

<style scoped>
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }
    li label {
        float: left;
        cursor: pointer;
    }
    li label input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }
    li button {
        float: right;
        margin-top: 3px;
        display: none;
    }
    li::before {
        content: initial;
    }
    li:last-child {
        border-bottom: none;
    }
    li:hover {
        background-color: #e3e3e3;
    }
    li:hover button {
        display: block;
    }
</style>